<template>
  <div class="VonDatePicker">
    <span class="label" v-if="label">{{ label }}</span>
    <el-date-picker
      :style="customStyle"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      :start-placeholder="start_placeholder"
      :end-placeholder="end_placeholder"
      v-bind="$attrs"
      v-on="$listeners"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: "VonDatePicker",
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  props: {
    start_placeholder: {
      type: String,
      default: "",
    },
    end_placeholder: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: String,
      default: "33px",
    },
    label: {
      type: String,
      default: "",
    },
  },
  computed: {
    customStyle() {
      let styleObj = {};
      styleObj.width = this.width;
      styleObj.height = this.height;
      styleObj.lineHeight = this.height;
      return styleObj;
    },
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.VonDatePicker {
  margin: 10px;
  width: 100%;
  .label {
    height: 20px;
    line-height: 20px;
    color: #909399;
    font-size: 16px;
    font-weight: 400;
    margin-right: 5px;
  }
  .el-date-picker {
    color: white !important;
    background: rgba(111, 117, 131, 0.3);
    padding-left: 4px;
    color: #1acc8f;
  }
}
</style>